<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>检索项目依赖库</title>
    <script src='/static/js/jquery.js'></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        form {
            width: 99vw;
            height: 95vh;

            margin: 0px auto;
        }

        input {
            width: 70%;
            height: 30px;
            margin-top: 10px;
            border-radius: 6px;
            border: 1px solid black;
            margin-left: 10px;
        }

        ul li input:nth-child(2) {
            display: inline-block;
            width: 90%;
            height: 25px;
            vertical-align: middle;
            border: 1px solid black;
        }

        ul {
            list-style: none;
            margin-top: 70px;
        }

        ul li {
            margin: 10px;
        }

        ul li input {
            width: 20px;
            height: 20px;
            display: inline-block;
            vertical-align: middle;
            margin: 0;
        }

        ul li button {
            width: 72px;
            height: 25px;
            vertical-align: middle;
            margin-left: 10px;
        }

        div button {
            float: right;
            width: 150px;
            height: 40px;
        }

        table.gridtable {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
            width: 99vw;
        }

        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }

        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
        }

        table.gridtable td:first-child {
            text-align: center;
        }

        div h2 {
            background: #666666;
        }

        table input {
            margin: 0;
            height: 18px;
            width: 45%;
        }

        .changeTd {
            text-align: center;
        }
    </style>
</head>
<body>
<form action="/showPackages" METHOD="post" onsubmit="return checkForm()">
    <div style="margin-left:50px">
        <input type="text" NAME="address" id="address" value="{{.address}}"/>　地址<br>
        <input type="text" name="keywords" id="keywords" value="{{.keywords}}"/>　关键字<br>
        <input type="text" name="gopath" id="gopath" value="{{.gopath}}"/>　GOPATH<br>
        <button type="button" onclick="showGoPathPackeges()">查看</button>
        <button>解析</button>
    </div>
    <div style="margin-top: 60px;">
        <h2>GITHUB</h2>
        <table class="gridtable">
            <tr>
                <th style="width:2%;"></th>
                <th style="width:60%;">依赖类库</th>
                <th style="width: 10%;">本地加载</th>
                <th style="width: 5%;">下载</th>
            </tr>
            {{range .github}}
                <tr>
                    <td><input type="checkbox" value="{{.LibIndex}}"/></td>
                    {{if .LibExists}}
                        <td><input type="text" style="width:90%;" value="{{.Libname}}"/></td>
                        <td class="changeTd">已下载</td>
                    {{else}}
                        <td style="color: red;"><input type="text" class="libname" value="{{.Libname}}"/></td>
                        <td style="color: red;" class="changeTd">未下载</td>
                    {{end}}
                    <td style="text-align: center"><input type="button" value="下载" class="downloadGit"></td>
                </tr>
            {{end}}
        </table>
        <br>

        <h2>GOLIB</h2>
        <table class="gridtable">
            <tr>
                <th style="width:2%;"></th>
                <th style="width:60%;">依赖类库</th>
            </tr>
            <tbody>
            {{range .other}}
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>{{.}}</td>
                </tr>
            {{end}}
        </table>
        <br>
        <h2>github</h2>
        <table class="gridtable">
            <tr>
                <th style="width:2%;"></th>
                <th style="width:60%;">依赖类库</th>
            </tr>
            {{range .golib}}
                <tr>
                    <td><input type="checkbox"/></td>
                    <td>{{.}}</td>
                </tr>
            {{end}}

            </tbody>

        </table>
    </div>
</form>
<script>

    function showGoPathPackeges() {
        document.location.href = "/showLibs"
    }

    function checkForm() {
        var addressValue = document.getElementById("address").value;
        var keywordsValue = document.getElementById("keywords").value;
        addressValue = trim(addressValue);
        keywordsValue = trim(keywordsValue);
        if (addressValue && keywordsValue) {
            /*提交表单*/
            return true;
        } else {
            alert("请填写完整元素再提交")
            return false;
        }
    }

    function trim(str) {
        return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');
    }

    $(function () {
        $(".downloadGit").on("click", function () {
            $(this).attr('value', "下载中");
            $(this).attr('disabled', true);
            var p = this
            $.ajax({
                //请求方式
                type: "POST",
                dataType: "json",//
                url: "/DownGitData",
                data: {"githubAdress": $(this).parent().parent().find(".libname").val()},
                success: function (result) {
                    $(p).attr('disabled', false);
                    if (result.result) {
                        $(p).parent().parent().find(".changeTd").html("已下载")
                        $(p).attr('value', "下载");
                        $(p).parent().parent().find(".changeTd").css("color","black")
                        alert("下载:"+result.githubAdress+",完成")
                    }else{
                        alert("下载:"+result.githubAdress+",失败")
                    }
                },
                //请求失败，包含具体的错误信息
                error: function (e) {
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });

        });

        //console.info($("tbody tr"))
        let ele = '';
        $("tbody tr").each(function () {
            $.each($(this).find("td"), function (index, value) {
                if (index > 0 & index < 3) {
                    $(this).on("click", function () {
                        ele = $('.gridtable tr');
                        ele.css("background-color", "#fff");
                        $(this).parent().css("background-color", "rgba(0,255,0,0.3)");
                        console.info($(this).parent())
                        //jQuery(this).parent().css('color','red');

                        // alert($(this).parent().css("color"))
                    })
                }
            })
            // $(this).find("td")
        })
    })

</script>
</body>
</html>